<template>
  <div class="container">
    <div>
      <el-upload
        accept=".png, .jpg, .jpeg"
        style="margin-bottom: 10px"
        :before-upload="beforeUpload"
        :http-request="uploadFile"
        :file-list="fileList"
        :limit="1"
        :show-file-list="false"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        action=""
      >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-upload"
        >更新水印图片</el-button>
      </el-upload>
      <!-- <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 10px"
        @click="dialogVisible = true"
        >更新水印</el-button
      > -->
    </div>
    <div class="box top">水印信息</div>
    <div class="box">
      <div class="left">水印类型</div>
      <div class="right">静态水印</div>
    </div>
    <div class="box">
      <div class="left">水印地址</div>
      <div class="right">/home/digitalArch/Files/WaterMark/waterMark.png</div>
    </div>
    <div class="box">
      <div class="left">图片大小</div>
      <div class="right">161.7*35.25</div>
    </div>
    <div class="box">
      <div class="left">水印方式</div>
      <div class="right">word、pdf文件</div>
    </div>
    <div class="box">
      <div class="left">水印平铺位置</div>
      <div class="right">
        <div>(1)pdf文件: 水印加在文件最后一页的右下角</div>
        <div>(2)word文档: 水印加在文件每页的左下角</div>
      </div>
    </div>
    <div class="box">
      <div class="left">水印字体颜色</div>
      <div class="right">蓝色</div>
    </div>
    <div class="box">
      <div class="left">水印字体</div>
      <div class="right">宋体</div>
    </div>
    <div class="box border-bottom">
      <div class="left">水印字体大小</div>
      <div class="right">30</div>
    </div>
    <el-dialog title="上传水印" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-upload
          style="width: 40vw"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :on-change="fileChange"
          :http-request="httpRequest"
          :limit="1"
          :on-exceed="handleExceed"
          :on-remove="handleRemove"
          action="#"
          list-type="text"
          :auto-upload="false"
        >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-upload"
          >上传附件</el-button>
        </el-upload>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadWaterMark()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadWaterMark } from '@/api/user'
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false
    }
  },
  methods: {
    beforeUpload(file) {
      // 在上传前执行的逻辑

      // 如果文件大小为0，则禁止上传
      if (file.size === 0) {
        this.$message.error('文件不能为空')
        return false // 阻止上传
      }

      // 如果通过验证，允许上传
      return true
    },
    fileChange(file, fileList) {
      if (file.size === 0) {
        this.$message.warning('该文件为空')
      }
      this.fileList = fileList.filter(item => item.size !== 0)
    },
    // 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
    httpRequest(option) {
      console.log(option)
    },
    // 超过限制数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    // 移除文件钩子
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 更新水印
    uploadFile(info) {
      const { file } = info
      this.file = file
      const formData = new FormData()
      formData.append('file', file)
      // 调用上传接口
      try {
        // 调上传接口
        uploadWaterMark(formData).then((res) => {
          if (res.code === '0') {
            this.$message({
              message: '水印图片更新成功',
              type: 'success'
            })
          }
        })
      } catch (error) {
        console.log(error)
      }
    }

  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.top {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  font-size: 16px;
  color: #333;
  border-top: 1px solid rgb(189, 189, 189);
  border-left: 1px solid rgb(189, 189, 189);
  border-right: 1px solid rgb(189, 189, 189);
  /* height: 40px; */
  line-height: 27px;
  width: 50%;
  display: flex;
}
.left {
  /* font-weight: bold; */
  margin-right: 20px;
  padding: 10px;
  width: 120px;
}
.right {
  padding: 10px;
  border-left: 1px solid rgb(189, 189, 189);
}
.border-bottom {
  border-bottom: 1px solid rgb(189, 189, 189);
}
</style>
